<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>修改头像</title>
		<meta name="viewport" content="user-scalable=0,width=device-width,initial-scale=1.0" >
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="js/jquery.form.js"></script>
	</head>
	<style type="text/css">
		body{
			    font-family: 'Helvetica Neue',Helvetica,sans-serif;
			    font-size: 17px;
			    line-height: 21px;
			    color: #000;
			    margin: 0px;
			    padding: 0px;
			    background-image: url(img/ba.jpg);
			}
			
		div.showtitle{
			width:100%;
			height: 40px;
			background: chartreuse;
		}
		
		div.showtitle span{
			line-height: 40px;
			text-align: center;
		    font-size: 30px;
		}
		
		.col-sm-6{
			float: left;
			width: 200px;
		}
		
		.fa-plus-circle{
			position: absolute;
			top: 0px;
			right: 0px;
		}
		
		 .nav-footer {
				    width: 100%;
				    position: fixed;
				    bottom: 0;
				    left: 0;
				    display: flex;
				    align-items: center;
				    justify-content: space-around;
				    background: #fff;
				    border-top: solid 1px #e6e6e6;
				    padding: 1%;
				    height: 50px;
				}
				.nav-footer a {
				    display: flex;
				    flex-direction: column;
				    align-content: center;
				    align-items: center;
				    font-size: 10px;
				    color: #929292;
				}
				.nav-footer a span img {
				    height: 25px;
				    overflow: hidden;
				    font-size: 23px;
				    padding-top: 2px;
				}
				.mui-icon {
				    font-family: Muiicons;
				    font-size: 24px;
				    font-weight: 400;
				    font-style: normal;
				    line-height: 1;
				    display: inline-block;
				    text-decoration: none;
				    -webkit-font-smoothing: antialiased;
				}
				.nav-footer a {
				    display: flex;
				    flex-direction: column;
				    align-content: center;
				    align-items: center;
				    font-size: 11px;
				    color: #929292;
				}
				
				.mui-bar-nav {
				    top: 0;
				    -webkit-box-shadow: 0 1px 6px #ccc;
				    box-shadow: 0 1px 6px #ccc;
				}
				
				.mui-bar {
				    position: fixed;
				    z-index: 10;
				    right: 0;
				    left: 0;
				    height: 44px;
				    padding-right: 10px;
				    padding-left: 10px;
				    border-bottom: 0;
				    background-color:RGB(88,88,88);
				}
				
				.mui-bar-nav.mui-bar .mui-icon {
				    /*margin-right: -10px;*/
				    margin-left: -10px;
				    padding-right: 10px;
				    padding-left: 10px;
				}
				.mui-bar .mui-icon {
				    font-size: 24px;
				    position: relative;
				    z-index: 20;
				    padding-top: 10px;
				    padding-bottom: 10px;
				}
				.mui-icon {
				    font-family: Muiicons;
				    font-size: 24px;
				    font-weight: 400;
				    font-style: normal;
				    line-height: 1;
				    display: inline-block;
				    text-decoration: none;
				    -webkit-font-smoothing: antialiased;
				}
				.mui-pull-left {
				    float: left;
				}
				a {
				    text-decoration: none;
				    color: #FC605A;
				}
				a {
				    background: 0 0;
				}
				
				.mui-bar .mui-title {
				    right: 201px;
				    left: 40px;
				    top: 4px;
				    display: inline-block;
				    overflow: hidden;
				    width: auto;
				    margin: 0;
				    text-overflow: ellipsis;
				}
				.mui-title {
				    font-size: 17px;
				    font-weight: 500;
				    line-height: 44px;
				    position: absolute;
				    display: block;
				    width: 100%;
				    margin: 0 -10px;
				    padding: 0;
				    text-align: center;
				    white-space: nowrap;
				    color: #fff;
				}
				
				.mine-photo{
			    	width: 100%;
				    background-image: url(img/curry.jpg);
				    height: 18rem;
				    background-repeat: no-repeat;
				    text-align: center;
				    position: relative;
				    color: #fff;
				    width: 320px;
				    height: 320px;
			    }
			    
			    .mine-photo img {
				    width: 80px;
				    height: 80px;				    
				    border: solid 1px #fff;
				    margin-top: 86%;
				    margin-right: -67%;
				}
				.empty{
					width: 100%;
					height: 36px;
				}
				
				.userid{
					position: absolute;
					left: 30px;
				}
				.title{
					position: absolute;
					left: 87px;
					top: 32px;
				}
				
				.thumbnail{
					position: absolute;
					left: 87px;
					top: 68px;
				}
				
				div.col-sm-6.col-md-3{
					width: 100%;
				}
				
				p.renwu{
					width: 10px;
					height: 10px;
					position: absolute;
					left: 0px;
				}
				
				p.title{
				    position: absolute;
				    top: 27px;
				    left: 80px;
			    }
			    img.pic{
			    	position: absolute;
			    	top: 52px;
			    	left: 80px;
			    }
			    
			    ul{
			    	width: 100%;
			    	height: 200px;
			    	float: right;
			    }
			    
			    li{
			    	list-style: none;
			    }
			    .file-btn{
			    	position: absolute;
			    	top: 50px;
			    	left: 7%;
			    }
			    .tijiao{
			    	position: absolute;
			    	top: 10%;
			    	left: 86%;
			    }
	</style>
	<body>		 
		
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"><img src="img/left_fri.png"/></a>
			<h1 class="mui-title">修改头像</h1>
		</header>
		
<form action="javascript:;" method="post" enctype="multipart/form-data" onsubmit="push()" class="biaodan">   
            <span>选择头像：</span>
            <input type="file" id="inFile" name="photo" class="file-btn" /><br>
            <input type="submit" name="" style="margin-top: 15%" class="tijiao">
</form>  

<script type="text/javascript">

function push(){
        var id=window.localStorage.getItem('userid');
        console.log(id);

        var url="http://172.24.10.175/workout/api.php/fuserphoto/userid/"+id;
        $(".biaodan").ajaxSubmit({
            url:url,
            dataType: 'json',
            beforeSubmit : function() {
                alert("更换成功");
                location.href="mine.html";
            },
        })
   }
		 </script>
	</body>
</html>
